import './Scss/Investment.scss'
import { useRequest, useSetState, useSize } from 'ahooks'
import { useEffect, useState, useRef } from 'react'
import { Http } from '../../../../Common/Api'
import { Column } from '@ant-design/plots'
import dayjs from 'dayjs'

export const Investment001 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const { runAsync: getProgressGetTotalInvest } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            const { accumulativeAmount, thisMonthAmount, thisYearAmount, totalAmount } = list[0]
            setData([
                { type: '总投资额', value: parseInt(totalAmount / 10000) || 0 },
                { type: '累计投资', value: parseInt(accumulativeAmount / 10000) || 0 },
                { type: '本年投资', value: parseInt(thisYearAmount / 10000) || 0 },
                { type: '本月投资', value: parseInt(thisMonthAmount / 10000) || 0 },
            ])
        },
    })

    useEffect(() => {
        getProgressGetTotalInvest({ url: 'getProgressGetTotalInvest', data: { date: dayjs().format('YYYY-MM') } })
    }, [getProgressGetTotalInvest])

    const [Data, setData] = useState([
        { type: '总投资额', value: 0 },
        { type: '累计投资', value: 0 },
        { type: '本年投资', value: 0 },
        { type: '本月投资', value: 0 },
    ])

    const [Charts, setCharts] = useState()

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                data: Data,
                autoFit: false,
                width,
                height: height,
                appendPadding: 16,
                maxColumnWidth: 14,
                xField: 'type',
                yField: 'value',
                seriesField: 'type',
                color: [
                    'l(90) 0:rgba(255, 218, 138, 1) 1:rgba(255, 218, 138, 0.4)',
                    'l(90) 0:rgba(199, 255, 239, 1) 1:rgba(199, 255, 239, 0.4)',
                    'l(90) 0:rgba(152, 179, 255, 1) 1:rgba(152, 179, 255, 0.4)',
                    'l(90) 0:rgba(0, 133, 88, 1) 1:rgba(0, 133, 88, 0.4)',
                ],
                legend: {
                    layout: 'horizontal',
                    position: 'top-right',
                    itemName: { style: { fill: 'white', fontSize: 12 } },
                },
                xAxis: {
                    label: { style: { fill: '#fff' } },
                    line: { style: { stroke: '#3AA8E2' } },
                    tickLine: { style: { stroke: '#3AA8E2' } },
                },
                yAxis: {
                    title: { text: '万', position: 'end', autoRotate: false, offset: -15, style: { fill: '#fff' } },
                    tickCount: 5,
                    label: { style: { fill: '#fff' }, formatter: e => e },
                    grid: { line: { style: { stroke: 'rgba(58, 168, 226, 0.2)' } } },
                },
                tooltip: {
                    formatter: ({ type, value }) => {
                        return { name: '金额', value: `${value} 万 ` }
                    },
                },
            }
            setCharts(config)
        }
    }, [Data, size])

    return (
        <div className="Investment001" ref={ChartsBox}>
            {Charts && <Column {...Charts} />}
        </div>
    )
}
